<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>jquery</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="/Jquery/js/jquery.js"></script>
	<style type="text/css">
		a{
			color: black;
		}
	</style>
	<script type="text/javascript">
		/*
		function setColor(){
			document.getElementById("a").style.color="blue";
		}
		*/
		$(document).ready(function(){
			$("#a").mouseover(function(){
				$("#a").css("color","blue");
			});
			
			//学生管理    被点击时  隐藏查询的三个标签
			$("#stu").click(function(){
				$(".ss").toggle();
			});
			
			//查询按钮  被点击时  添加学生信息
			$("#tabBtn").click(function(){
				//ajax
				$.ajax({
					//发送方式
					type:"post",
					//请求地址
					url:"servlet/Ajax",
					//请求参数
					data:{name:"张三",age:12},
					
					//返回参数类型
					dataType:"json",
					//返回成功 接收返回值
					success:function(data){
						for(var index in data){
							$("#tab").append("<tr class=\"student\"><td>"+data[index].sno+"</td><td>"+data[index].name+"</td><td>"+data[index].classes+"</td></tr>")
						}
					},
					
					//返回失败处理
					error:function(){
						alert("处理失败");	
					}
					
				});
				
				//var students = [{sno:"1001",name:"张三",classes:"1801"},{sno:"1002",name:"李四",classes:"1801"},{sno:"1003",name:"王五",classes:"1801"}]
				//表格添加学生信息 
				
			});
			//删除按钮  被点击时   删除学生信息
			$("#tabDel").click(function(){
				$(".student").remove();
			});
			
			
		});
		
		
		
	</script>
  </head>
  
  <body>
  	<a id="a" href="" >新闻</a>
  	<dl>
  		<dt id="stu">学生管理</dt>
  		<dd class="ss">成绩查询</dd>
  		<dd class="ss">学分查询</dd>
  		<dd class="ss">课程查询</dd>
  	</dl>
  	<hr/>
  	<button id="tabBtn">查询</button>
  	<button id="tabDel">删除</button>
  	<table border="1px" id="tab">
  		<tr>
  			<th>学号</th>
  			<th>姓名</th>
  			<th>班级</th>
  		</tr>
  	</table>
  </body>
</html>
